<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Slide Test</title>
        <link rel="stylesheet" href="http://res.769.com/css/base.css" />
        <style type="text/css">
            .wrap{width:980px; margin:0 auto}
            .title{margin-bottom:10px; color: #333}
            .title h1{font-size: 16px; padding: 8px 0; font-weight: 800}
            .title p{color:#999}
            .title a{padding:1px 4px; text-decoration: none; margin:0 2px}
            .title a:hover{background:#038EFE; color: #FFF}

            .slide{width:505px; height: 250px; position: relative; overflow: hidden}
            .slide-list li,.slide-list img{width:505px; height: 250px}

            .shadow{position: absolute; left: 0; bottom: 0; height: 28px; background: #000; opacity: .5; filter:alpha(opacity=50);width:505px}
            .trigger{position: absolute; left:0; bottom: 0; height: 28px}
            .trigger li{float: left; display: inline; width: 101px; line-height: 28px; text-align: center}
            .trigger a{display:block; color: #FFF; text-decoration: none}
            .trigger .current a{background:#FFF; color: #000}

            .triggers{position:absolute; right:5px; bottom:5px}
            .triggers li{width:20px; height: 20px; float: left; display: inline; border-radius:20px; background: #FFF; text-align: center; line-height:20px; margin-left: 5px; color: #DE7D4B; opacity: .7; filter: alpha(opacity=70); cursor: pointer}
            .triggers .current{background:#F60; color:#FFF; font-weight: 800}
            .mb20{margin-bottom:20px}


        </style>
    </head>
    <body>
        <div class="wrap">

            <div class="mb20">
                <div class="title">
                    <h1>图片轮换调用实例(自定义triggers)</h1>
                    <p>实现<a href="http://www.paipai.com/">拍拍网</a>的的幻灯效果</p>
                </div>
                <div class="slide" id="slide1">
                    <ul class="slide-list">
                        <li><img src="http://img5.paipaiimg.com/128685c5/boss-4e36046d-00000000185d69610001312162925000.1.jpg" alt="" /></li>
                        <li><img src="http://img6.paipaiimg.com/e29a1c29/boss-4e3224ae-00000000185d69610001311909038000.1.jpg" alt="" /></li>
                        <li><img src="http://img1.paipaiimg.com/c8c81dfc/boss-4e3a6729-00000000185d69610001312450345000.1.jpg" alt="" /></li>
                        <li><img src="http://img0.paipaiimg.com/07e78abd/boss-4e2fe0c0-00000000185d69610001311760576000.1.jpg" alt="" /></li>
                        <li><img src="http://img3.paipaiimg.com/6cfd8120/boss-4e375f93-00000000185d69610001312251795000.1.jpg" alt="" /></li>			
                    </ul>
                    <div class="shadow"></div>
                    <ol class="trigger">
                        <li><a href="#">店铺优惠券</a></li>
                        <li><a href="#">家居包邮费</a></li>
                        <li><a href="#">新店入驻三重礼</a></li>
                        <li><a href="#">百店夏末清仓</a></li>
                        <li><a href="#">充话费送化肥</a></li>
                    </ol>
                </div>
            </div>

            <div class="mb20">
                <div class="title">
                    <h1>图片轮换调用实例(自动生成triggers)</h1>
                    <p>实现<a href="http://www.taobao.com/">淘宝网</a>的的幻灯效果</p>
                </div>
                <div class="slide" id="slide2">
                    <ul class="slide-list">
                        <li><img src="http://img5.paipaiimg.com/128685c5/boss-4e36046d-00000000185d69610001312162925000.1.jpg" alt="" /></li>
                        <li><img src="http://img6.paipaiimg.com/e29a1c29/boss-4e3224ae-00000000185d69610001311909038000.1.jpg" alt="" /></li>
                        <li><img src="http://img1.paipaiimg.com/c8c81dfc/boss-4e3a6729-00000000185d69610001312450345000.1.jpg" alt="" /></li>
                        <li><img src="http://img0.paipaiimg.com/07e78abd/boss-4e2fe0c0-00000000185d69610001311760576000.1.jpg" alt="" /></li>
                        <li><img src="http://img3.paipaiimg.com/6cfd8120/boss-4e375f93-00000000185d69610001312251795000.1.jpg" alt="" /></li>			
                    </ul>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="../../jquery.js"></script>
        <script type="text/javascript" src="../SimpleCore.js"></script>
        <script type="text/javascript" src="SimpleSlider_v1.1.js"></script>
        <script type="text/javascript">
            /*var slide1 = new Simple.Slider({
                node : $('#slide1')[0],
                content : '.slide-list li',
                trigger : '.trigger li',
                triggerClass : 'trigger',
                triggerCurrentClass : 'current',
                delay : 400,
                speed : 200,
                direction : 'left'
            });*/
            
             $('#slide1').slider({
                content : '.slide-list li',
                trigger : '.trigger li',
                triggerCurrentClass : 'current'
            });

            $('#slide2').slider({
                content : '.slide-list li',
                trigger : true,
                triggerClass : 'triggers',
                triggerCurrentClass : 'current',
                delay : 400,
                speed : 200,
                timeout : 5000,
                direction : 'top'
            });
        </script>	
    </body>
</html>